$hl-color: #f90;
$base-border: 1px solid black;
#app {
  color:  $hl-color;
  border: $base-border
}
#content {
  article {
    h1 { color: #1dc08a }
    p {  font-style: italic; }
    a {
      color: blue;
      &.active { color: red }
    }
  }
  aside { background-color: #f90 }
}
@mixin  dan {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.myMixin{
  p{
    @include dan;
    width: 100px;
  }
}
// 主轴
$flex-jc: (
  // key: value
  'start': flex-start,
  'end': flex-end,
  'center': center,
  'between': space-between,
  'around': space-around,
  'evenly': space-evenly,
);


// $each 进行遍历
@each $key, $value in $flex-jc { 
  .jc-#{$key} {
    justify-content: $value;
  }
}